<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>

    <header class="head" style="padding-top:0.4rem;">
        <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3 style="text-align: center;">个人资料</h3>
        <div class="head-r"></div>
    </header>
    <div class="head-d" style="padding-top:0.4rem;"></div>

    <div id="list">

        <ul class="list-input mb20">
            <li style="justify-content:space-between;" onclick="changeAvatar();">
                <label><i>*</i>头像:</label>
                <img id="avatar" src="image/gril.png">
            </li>
            <li>
                <label><i>*</i>昵称:</label>
                <input type="text" id="nickname">
            </li>
            <li>
                <label><i>*</i>真实姓名:</label>
                <input type="text" id="name">
                <div class="list-input-r">
                    隐藏
                    <div id="hide" class="list-input-switch" onclick="list_input_switch()"></div>
                </div>
            </li>
            <li>
                <label><i>*</i>支付宝号:</label>
                <input type="text" placeholder="为了保证转账无误,请写真实支付宝账号" id="alipay" >
            </li>
            <li>
                <label><i>*</i>微信号:</label>
                <input type="text" id="wechat">
            </li>
        </ul>
        <ul class="list-text-r-new">
            <li>
                <p>邀请码</p>ABCDEF
            </li>
        </ul>

    </div>
<!--     <div class="list-text-r mt20">
        <ul onclick="changeAvatar();">
            <li>
                修改头像
            </li>
        </ul>
    </div> -->

<!--     <div class="list-text-r">
        <ul>
            <li>
                最后登录时间
                <p>2018-08-22</p>
            </li>
        </ul>
    </div> -->

    <div class="btn-1 mt80" onclick="saveUserInfo();">保存</div>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/template" id="template">
    <ul class="list-input mb20">
        <li style="justify-content:space-between;" onclick="changeAvatar();">
            <label><i>*</i>头像:</label>
            <img id="avatar" src="{{=it.avatar}}">
        </li>
        <li>
            <label><i>*</i>昵称:</label>
            <input type="text" id="nickname" value="{{=it.nickname}}">
        </li>
        <li>
            <label><i>*</i>真实姓名:</label>
            <input type="text" id="name" value="{{=it.name}}">

            <div class="list-input-r">
                隐藏
                <div id="hide" 
                {{? it.is_anonymous}}
                class="list-input-switch active"
                {{??}}
                class="list-input-switch"
                {{?}}
                onclick="list_input_switch()"></div>
            </div>

        </li>
        <li>
            <label><i>*</i>支付宝号:</label>
            <input type="text" id="alipay" value="{{=it.alipay}}" placeholder="提现时使用，请认真填写">
        </li>
        <li>
            <label><i>*</i>微信号:</label>
            <input type="text" id="wechat" value="{{=it.wechat}}">
        </li>
    </ul>
    <ul class="list-input">
       {{? it.invite_user_code}}
       <li style="justify-content:flex-start;">
           <p style="margin-right:0.2rem;">上级经销商:</p>{{=it.invite_user_name}} {{=it.invite_user_phone}}
       </li>
       {{??}}
       <li>
        <p>邀请码(只可填一次)</p>
        <input type="text" id="invite_code">
    </li>
    {{?}}
</ul>
</script>
<script type="text/javascript">

    apiready = function(){
        has_inviteCode = 0;
        // 是否隐藏真实姓名
        is_hide = 0;
        loadData();
    }

    function loadData(){
        var token = $api.getStorage('token');
        api.ajax({
          url: webAddress + '/api/auth/info',
          method: 'get',
          data: {
            values: {
            },
        },
        headers: {
            Authorization: 'Bearer ' + token,
            Accept: 'application/json',
        },
    },function(ret, err){
      if (ret) {
        // alert( JSON.stringify( ret ) );
        if (ret.data) {
            if (ret.data.invite_user_code) {
                has_inviteCode = 1;
            }
            templateFun(ret.data);
        }
    } else {
        // alert( JSON.stringify( err ) );
    }
});
    }

    // 模板赋值函数
    function templateFun(data){
      var template = $api.byId('template');
      var dotFn = doT.template(template.innerHTML);
      var html = dotFn(data);
      var list = $api.byId('list');
      $api.html(list, html);

  }

  // 保存修改
  function saveUserInfo(){

    var wechat = $api.byId('wechat').value;
    var alipay = $api.byId('alipay').value;
    var nickname = $api.byId('nickname').value;
    var name = $api.byId('name').value;

    if (!nickname) {
        api.toast({
            msg: '请填写昵称!',
            duration: 2000,
            location: 'bottom'
        });
        return false;
    }

    if (!name) {
        api.toast({
            msg: '请填写真实姓名!',
            duration: 2000,
            location: 'bottom'
        });
        return false;
    }

    if (!alipay) {
        api.toast({
            msg: '请填写支付宝账号!',
            duration: 2000,
            location: 'bottom'
        });
        return false;
    }

    if (!wechat) {
        api.toast({
            msg: '请填写微信账号!',
            duration: 2000,
            location: 'bottom'
        });
        return false;
    }

    // 判断是否为默认
    var isHide = $('#hide').hasClass("active");
    var hideValue = 0;
    if (isHide) {
      hideValue = 1;
  }else{
      hideValue = 0;
  }

  var token = $api.getStorage('token');

    // 未添加邀请码
    if (!has_inviteCode) {
        var invite_code = $api.byId('invite_code').value;
        api.ajax({
          url: webAddress + '/api/user/update',
          method: 'post',
          data: {
            values: {
              wechat: wechat,
              alipay: alipay,
              nickname: nickname,
              name: name,
              is_anonymous: hideValue,
              invite_code: invite_code,
          },
      },
      headers: {
        Authorization: 'Bearer ' + token,
        Accept: 'application/json',
    },
},function(ret, err){
  if (ret) {
    // alert( JSON.stringify( ret ) );
    if (ret.status_code == 200) {
      api.toast({
        msg: ret.message,
        duration: 2000,
        location: 'bottom',
        global: true,
    });
  }

} else {
    // alert( JSON.stringify( err ) );
    api.toast({
      msg: err.body.message,
      duration: 2000,
      location: 'bottom'
  });
    return false;
}
});
        
    }else{
        // 添加了邀请码
        api.ajax({
          url: webAddress + '/api/user/update',
          method: 'post',
          data: {
            values: {
              wechat: wechat,
              alipay: alipay,
              nickname: nickname,
              name: name,
              is_anonymous: hideValue,
          },
      },
      headers: {
        Authorization: 'Bearer ' + token,
        Accept: 'application/json',
    },
},function(ret, err){
  if (ret) {
    // alert( JSON.stringify( ret ) );
    if (ret.status_code == 200) {
      api.toast({
        msg: ret.message,
        duration: 2000,
        location: 'bottom',
        global: true,
    });
  }

} else {
    // alert( JSON.stringify( err ) );
    api.toast({
      msg: err.body.message,
      duration: 2000,
      location: 'bottom'
  });
    return false;
}
}); 
    }
}

    // 修改头像
    function changeAvatar(){
        api.actionSheet({
            // title: '底部弹出框测试',
            cancelTitle: '取消',
            // destructiveTitle: '红色警告按钮',
            buttons: ['拍照', '从手机上传照片']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                //拍照
                takePicture('camera');
            } else if (index == 2) {
                //从手机上传
                takePicture('library');
            }
        });
    }

    // 选择图片
    function takePicture(sourceType){
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 50,
            targetWidth: 100,
            targetHeight: 100,
            saveToPhotoAlbum: false,
        }, function(ret, err) {
            if (ret) {
               // alert(JSON.stringify(ret));
               filePath = ret.data;
               $('#avatar').attr('src',filePath);
               uploadAvatar(filePath);
               // uploadPic(filePath);
           } else {
            // alert(JSON.stringify(err));
        }
    });
    }

    // 上传头像
    function uploadAvatar(filePath){
        if (!filePath) {
            api.toast({
                msg: '请选择头像!',
                duration: 2000,
                location: 'bottom'
            });
            return false;
        }

        api.showProgress({
            title: '头像上传中...',
            text: '请稍后...',
            modal: false
        });

        var token = $api.getStorage('token');
        api.ajax({
            url: webAddress + '/api/user/avatar',
            method: 'post',
            data: {
                files: { 
                    photo: filePath,
                }
            },
            headers: {
                Authorization: 'Bearer ' + token,
                Accept: 'application/json',
            },
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                api.hideProgress();
                if (ret.status_code == 200) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'bottom',
                        global: true,
                    });
                }
              //   api.sendEvent({
              //     name: 'reload'
              // });
              //   api.closeWin();
          } else {
                // alert( JSON.stringify( err ) );
                if (err.statusCode == 400) {
                    api.toast({
                        msg: err.body.message,
                        duration: 2000,
                        location: 'bottom'
                    });
                    return false;
                }
            }
        });

    }

    function closeWin(){
        api.sendEvent({
          name: 'reload'
      });
        api.closeWin();
    }
</script>
</html>